<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}},有{{hjy }}
    <br>
    <input type="text" v-model="hjy" >

    <br>
    <input type="button" value="操起来" v-on:click="look()">
    <br>
    <div style="font-size: 25px;color: green" >
        {{msg}}
    </div>


    <div style="font-size: 25px;color: red" >
        {{text}}
    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data:{
           name:"波多野结衣",
            hjy:"0",
            msg:"吉沢明步老师今天也要努力啊！！！还有加藤鹰老师！！！我的选择是杰伦老师！！！",
            text:"胡梦文大傻逼！！！！今天也要CB啊！！！！！！"
        },
        methods:{
            look:function () {
                setInterval( ()=> {
                    var startstr = this.msg.substring(0, 1);
                    var end = this.msg.substring(1);
                    this.msg = end+startstr;
                },400),
                    setInterval( ()=> {
                    var startstr = this.text.substring(0, 1);
                    var end = this.text.substring(1);
                    this.text = end+startstr;
                },400)

            } ,
        }
    })
</script>
</body>
</html>